// 语言配置
const translations = {
    zh: {
        pageTitle: "可持续发展历史演进时间轴",
        english: "English",
        downloadTimeline: "下载时间轴",
        close: "关闭",
        events: {
            1970: {
                title: "1970年代：环境危机与全球觉醒",
                events: [
                    "<strong>触发事件：</strong>工业化、污染、人口增长",
                    "<strong>关键出版物：</strong>卡森《寂静的春天》(1962)",
                    "<strong>关键出版物：</strong>梅多斯等《增长的极限》(1972)",
                    "<strong>重要会议：</strong>1972年联合国斯德哥尔摩会议",
                    "<strong>成果：</strong>环境成为全球政治议题"
                ]
            },
            1980: {
                title: "1980年代：可持续发展概念诞生",
                events: [
                    "<strong>1980年：</strong>IUCN世界保护战略首次正式使用\"可持续发展\"",
                    "<strong>1987年：</strong>布伦特兰报告《我们共同的未来》",
                    "• 当代需求与未来世代需求的平衡",
                    "• 代际公平原则",
                    "• 以人类需求为中心",
                    "• 环境承载力限制",
                    "<strong>成果：</strong>可持续发展成为发展理念"
                ]
            },
            1990: {
                title: "1990年代：制度化与三重底线",
                events: [
                    "<strong>1992年：</strong>地球峰会（里约会议）",
                    "• 《21世纪议程》",
                    "• 《气候变化框架公约》",
                    "• 《生物多样性公约》",
                    "<strong>三重底线：</strong>经济、社会、环境三重绩效",
                    "<strong>成果：</strong>可持续发展进入政策实践阶段"
                ]
            }
        }
    },
    en: {
        pageTitle: "Sustainability Timeline Explorer",
        english: "中文",
        downloadTimeline: "Download Timeline",
        close: "Close",
        events: {
            1970: {
                title: "1970s: Environmental Crisis & Global Awareness",
                events: [
                    "<strong>Trigger Events:</strong> Industrialization, pollution, population growth",
                    "<strong>Key Publications:</strong> Carson's Silent Spring (1962)",
                    "<strong>Key Publications:</strong> Meadows et al. The Limits to Growth (1972)",
                    "<strong>Key Event:</strong> 1972 UN Stockholm Conference",
                    "<strong>Outcome:</strong> Environment becomes global political issue"
                ]
            },
            1980: {
                title: "1980s: Emergence of Sustainable Development",
                events: [
                    "<strong>1980:</strong> IUCN World Conservation Strategy first formal use of \"sustainable development\"",
                    "<strong>1987:</strong> Brundtland Report (Our Common Future)",
                    "• Present vs future generations' needs",
                    "• Intergenerational equity",
                    "• Human needs central",
                    "• Environmental limits",
                    "<strong>Outcome:</strong> Sustainability becomes development philosophy"
                ]
            },
            1990: {
                title: "1990s: Institutionalisation & Triple Bottom Line",
                events: [
                    "<strong>1992:</strong> Earth Summit (Rio)",
                    "• Agenda 21",
                    "• Climate Change Framework Convention",
                    "• Biodiversity Convention",
                    "<strong>Triple Bottom Line:</strong> Economic, social, environmental performance",
                    "<strong>Outcome:</strong> Sustainability enters policy practice"
                ]
            }
        }
    }
};

// 当前语言
let currentLang = 'zh';

// 初始化
document.addEventListener('DOMContentLoaded', function() {
    renderTimeline();
    setupEventListeners();
    updateLanguage();
});

function setupEventListeners() {
    // 语言切换
    document.getElementById('lang-toggle').addEventListener('click', toggleLanguage);
    
    // 下载时间轴
    document.getElementById('download-btn').addEventListener('click', downloadTimeline);
    
    // 模态框关闭
    document.querySelector('.close').addEventListener('click', closeModal);
    window.addEventListener('click', function(event) {
        if (event.target === document.getElementById('modal')) {
            closeModal();
        }
    });
}

function toggleLanguage() {
    currentLang = currentLang === 'zh' ? 'en' : 'zh';
    updateLanguage();
    renderTimeline();
}

function updateLanguage() {
    const t = translations[currentLang];
    document.getElementById('page-title').textContent = t.pageTitle;
    document.getElementById('lang-text').textContent = t.english;
    document.getElementById('download-text').textContent = t.downloadTimeline;
}

function renderTimeline() {
    const timeline = document.getElementById('timeline');
    timeline.innerHTML = '';
    
    const years = [1970, 1980, 1990];
    const t = translations[currentLang];
    
    years.forEach(year => {
        const item = createTimelineItem(year, t.events[year].title);
        timeline.appendChild(item);
    });
}

function createTimelineItem(year, title) {
    const item = document.createElement('div');
    item.className = 'timeline-item';
    item.setAttribute('data-year', year);
    
    item.innerHTML = `
        <div class="timeline-dot"></div>
        <div class="timeline-content">
            <div class="timeline-year">${year}s</div>
            <div class="timeline-title">${title}</div>
        </div>
    `;
    
    item.addEventListener('click', () => showModal(year));
    
    return item;
}

function showModal(year) {
    const t = translations[currentLang];
    const eventData = t.events[year];
    
    document.getElementById('modal-title').textContent = eventData.title;
    
    const modalBody = document.getElementById('modal-body');
    modalBody.innerHTML = `
        <ul class="event-list">
            ${eventData.events.map(event => `<li>${event}</li>`).join('')}
        </ul>
    `;
    
    document.getElementById('modal').style.display = 'block';
}

function closeModal() {
    document.getElementById('modal').style.display = 'none';
}

function downloadTimeline() {
    // 使用html2canvas库实现下载功能
    // 这里简化实现，实际项目中需要引入html2canvas库
    alert(currentLang === 'zh' ? 
        '下载功能需要引入html2canvas库。在实际项目中，这将生成时间轴的PNG图片。' :
        'Download requires html2canvas library. In a real project, this would generate a PNG of the timeline.');
}

// 添加平滑滚动
document.querySelectorAll('.timeline-item').forEach(item => {
    item.addEventListener('click', () => {
        item.scrollIntoView({ behavior: 'smooth', block: 'center' });
    });
});
